<template>
  <div class="box">
    <van-tabs @click="cutNav">
      <van-tab v-for="(item, index) in navList" :key="index" :title="item">
        <div class="chinic_list" v-for="(itm, idx) in chinicList" :key="idx">
          <div class="chinic_box" v-if="itm.chinic_kind === item">
            <div class="chinic_box_title" @click="goVideoDetail(itm.chinic_id)">
              <img :src="itm.chinic_pic" alt="" class="chinic_box_title_pic1">
              <div class="chinic_box_title_center">
                <div class="top">
                  <p>{{itm.chinic_name}}</p>
                  <img src="@/assets/images/chinic_icon.png" alt="" class="chinic_box_title_pic2">
                </div>
                <div class="bottom">
                  <van-icon class="bottom_icon" name="location-o" />
                  <p>{{itm.chinic_address}}</p>
                </div>
              </div>
              <span>{{itm.chinic_num + '人看过'}}</span>
            </div>
            <div class="chinic_box_video" @click="playVideo($event, idx)">
              <video :id="`video_${idx}`" class="video" :src="itm.chinic_video"></video>
              <img src="@/assets/images/play.png" alt="" :id="`video_${idx}`" v-show="action !== idx || videoBool" class="chinic_box_video_playBtn" @click="playVideoBtn">
            </div>
            <div class="chinic_box_text" @click="goVideoDetail(itm.chinic_id)">
              <h5>相关介绍</h5>
              <p>{{itm.chinic_introduce}}</p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getVideoKindList } from '../../api'
import Vue from 'vue'
import Video from 'video.js'
// import 'video.js/dist/video-js.css'
import { Tab, Tabs, Icon } from 'vant'
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Icon)
Vue.prototype.$video = Video
export default {
  data () {
    return {
      navList: ['推荐日记', '精选日记', '美牙', '美眼', '美鼻', '美胸', '美体塑形', '皮肤美容', '面部整形'],
      chinicList: [],
      old_id: '',
      videoBool: true,
      action: -1,
      idx: '',
      title: '推荐日记'
    }
  },
  computed: {},
  mounted () {
    getVideoKindList().then(res => {
      // this.chinicList = res.data.data
      if (res.data.code === '200') {
        res.data.data.map(item => {
          this.chinicList = res.data.data
        })
      }
    })
  },
  methods: {
    playVideo (e, action) {
      this.action = action
      this.videoBool = false
      // // 控制单个视频的播放暂停(独立)
      // var idx = e.target.id ? e.target.id : e.target.dataset.id
      // var vide = document.getElementById(idx)
      // if (vide.paused) {
      //   vide.play()
      // } else if (vide.play()) {
      //   vide.pause()
      // }
      // 播放当前视频，上个视频暂停播放
      var idx = e.target.id ? e.target.id : e.target.dataset.id
      this.idx = idx
      var newVis = document.getElementById(idx)
      if (this.old_id === idx) {
        if (newVis.paused) {
          newVis.play()
          this.videoBool = false
        } else if (newVis.play()) {
          newVis.pause()
          this.videoBool = true
        }
      } else {
        if (this.old_id && document.getElementById(this.old_id).play()) {
          document.getElementById(this.old_id).pause()
        }
        if (newVis.paused) {
          newVis.play()
          this.videoBool = false
        }
      }
      this.old_id = idx
    },
    playVideoBtn (e) {
      this.videoBool = false
    },
    cutNav (name, title) {
      this.title = title
      const idx = this.idx
      if (idx !== '') {
        var newVis = document.getElementById(idx)
        if (this.old_id === idx) {
          if (newVis.paused) {
            // newVis.play()
            this.videoBool = false
          } else if (newVis.play()) {
            newVis.pause()
            this.videoBool = true
          }
        } else {
          if (this.old_id && document.getElementById(this.old_id).play()) {
            document.getElementById(this.old_id).pause()
          }
          if (newVis.paused) {
            newVis.play()
            this.videoBool = false
          }
        }
        this.old_id = idx
      }
    },
    goVideoDetail (chinicId) {
      this.$router.push({ path: '/videoDetail', query: { chinicId } })
    }
  }
}
</script>

<style lang="scss" scoped>
.chinic_list {
  margin-top: 0.05rem;
  width: 100%;
  height: auto;
  padding: 0 0.15rem;
  .chinic_box {
    width: 100%;
    height: auto;
    .chinic_box_title {
      padding: 0 0.05rem;
      width: 100%;
      height: 0.32rem;
      margin-bottom: 0.1rem;
      margin-top: 0.1rem;
      .chinic_box_title_pic1 {
        width: 0.32rem;
        height: 0.32rem;
        float: left;
        margin-right: 0.1rem;
      }
      .chinic_box_title_center {
        width: 2rem;
        height: 0.32rem;
        float: left;
        .top {
          height: 0.16rem;
          width: 100%;
          p {
            max-width: 1.7rem;
            line-height: 0.16rem;
            float: left;
            margin-right: 0.05rem;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            color: #171717;
            font-size: 0.12rem;
          }
          .chinic_box_title_pic2 {
            width: 0.16rem;
            height: 0.16rem;
            float: left;
          }
        }
        .bottom {
          width: 100%;
          height: 0.16rem;
          .bottom_icon {
            float: left;
            font-size: 0.14rem;
            line-height: 0.16rem;
            color: #707070;
          }
          p {
            float: left;
            max-width: 1.7rem;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            color: #707070;
            font-size: 0.12rem;
            line-height: 0.16rem;
          }
        }
      }
      span {
        float: right;
        line-height: 0.32rem;
        font-size: 0.12rem;
        color: #868686;
      }
    }
    .chinic_box_video {
      width: 100%;
      height: 1.9rem;
      margin-bottom: 0.1rem;
      padding: 0 0.09rem;
      position: relative;
      video {
        width: 3.27rem;
        height: 1.9rem;
      }
      .chinic_box_video_playBtn {
        width: 0.6rem;
        height: 0.6rem;
        position: absolute;
        z-index: 500;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
      }
    }
    .chinic_box_text {
      width: 100%;
      height: 0.48rem;
      margin-bottom: 0.18rem;
      padding: 0 0.05rem;
      h4 {
        color: #303030;
        font-size: 0.14rem;
        line-height: 0.14rem;
        font-weight: normal;
      }
      p {
        width: 100%;
        height: 0.28rem;
        font-size: 0.12rem;
        line-height: 0.14rem;
        color: #767676;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
/deep/ .van-tab {
  flex-basis: auto!important;
  padding: 0 0.06rem;
}
/deep/ .van-ellipsis {
  font-size: 0.12rem;
  color: #171717;
  flex-basis: auto!important;
}
/deep/ .van-tabs__wrap--scrollable {
  padding: 0 0.15rem;
}
</style>
